<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../../">
  <title data-ice="title">src/explorer/ModelsExplorer.js | xeokit-bim-viewer</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<meta name="description" content="BIM viewer built on xeokit"><meta property="og:type" content="website"><meta property="og:url" content="https://github.com/xeokit/xeokit-bim-viewer"><meta property="og:site_name" content="xeokit-bim-viewer"><meta property="og:title" content="xeokit-bim-viewer"><meta property="og:image" content="./images/logo.jpg"><meta property="og:description" content="BIM viewer built on xeokit"><meta property="og:author" content="http://xeolabs.com"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="xeokit-bim-viewer"><meta property="twitter:description" content="BIM viewer built on xeokit"><meta property="twitter:image" content="./images/logo.jpg"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./" style="display: flex; align-items: center;"><img src="./image/brand_logo.jpg" style="width:34px;"></a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/xeokit/xeokit-bim-viewer"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/BIMViewer.js~BIMViewer.html">BIMViewer</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#collision">collision</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/collision/ObjectsKdTree3.js~ObjectsKdTree3.html">ObjectsKdTree3</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#server">server</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/server/Server.js~Server.html">Server</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">src/explorer/ModelsExplorer.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import {math, XKTLoaderPlugin} from &quot;@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js&quot;;
import {Controller} from &quot;../Controller.js&quot;;
import {ModelsContextMenu} from &quot;../contextMenus/ModelsContextMenu.js&quot;;

const tempVec3a = math.vec3();


/**
 * Custom data access strategy for {@link XKTLoaderPlugin}.
 * @private
 */
class BIMViewerDataSource {

    constructor(server) {
        this._server = server;
    }

    setProjectId(projectId) {
        this._projectId = projectId;
    }

    setModelId(modelId) {
        this._modelId = modelId;
    }

    getManifest(src, ok, error) {
        this._server.getSplitModelManifest(this._projectId, this._modelId, src, ok, error);
    }

    getMetaModel(src, ok, error) {
        this._server.getSplitModelMetadata(this._projectId, this._modelId, src, ok, error);
    }

    getXKT(src, ok, error) {
        this._server.getSplitModelGeometry(this._projectId, this._modelId, src, ok, error)
    }
}


/** @private */
class ModelsExplorer extends Controller {

    constructor(parent, cfg) {

        super(parent, cfg);

        if (!cfg.modelsTabElement) {
            throw &quot;Missing config: modelsTabElement&quot;;
        }

        if (!cfg.unloadModelsButtonElement) {
            throw &quot;Missing config: unloadModelsButtonElement&quot;;
        }

        if (!cfg.modelsElement) {
            throw &quot;Missing config: modelsElement&quot;;
        }

        this._enableAddModels = !!cfg.enableEditModels;
        this._modelsTabElement = cfg.modelsTabElement;
        this._loadModelsButtonElement = cfg.loadModelsButtonElement;
        this._unloadModelsButtonElement = cfg.unloadModelsButtonElement;
        this._addModelButtonElement = cfg.addModelButtonElement;
        this._modelsElement = cfg.modelsElement;
        this._modelsTabButtonElement = this._modelsTabElement.querySelector(&quot;.xeokit-tab-btn&quot;);

        if (!this._modelsTabButtonElement) {
            throw &quot;Missing DOM element: ,xeokit-tab-btn&quot;;
        }

        this._dataSource = new BIMViewerDataSource(this.server);

        this._xktLoader = new XKTLoaderPlugin(this.viewer, {
            dataSource: this._dataSource
        });

        this._modelsContextMenu = new ModelsContextMenu({
            enableEditModels: cfg.enableEditModels,
            hideOnAction: true
        });

        this._modelsInfo = {};
        this._numModels = 0;
        this._numModelsLoaded = 0;
        this._projectId = null;
    }

    setObjectColors(objectColors) {
        this._xktLoader.objectDefaults = objectColors;
    }

    loadProject(projectId, done, error) {
        this.server.getProject(projectId, (projectInfo) =&gt; {
            this.unloadProject();
            this._projectId = projectId;
            this._modelsInfo = {};
            this._numModels = 0;
            this._parseProject(projectInfo, done);
            if (this._numModelsLoaded &lt; this._numModels) {
                this._loadModelsButtonElement.classList.remove(&quot;disabled&quot;);
            }
            if (this._numModelsLoaded &gt; 0) {
                this._unloadModelsButtonElement.classList.remove(&quot;disabled&quot;);
            }
            if (this._enableAddModels) {
                this._addModelButtonElement.classList.remove(&quot;disabled&quot;);
            }
        }, (errMsg) =&gt; {
            this.error(errMsg);
            if (error) {
                error(errMsg);
            }
        });
    }

    _parseProject(projectInfo, done) {
        this._buildModelsMenu(projectInfo);
        this._parseViewerConfigs(projectInfo);
        this._parseViewerContent(projectInfo, () =&gt; {
            this._parseViewerState(projectInfo, () =&gt; {
                done();
            });
        });
    }

    _buildModelsMenu(projectInfo) {
        var html = &quot;&quot;;
        const modelsInfo = projectInfo.models || [];
        this._modelsInfo = {};
        this._numModels = modelsInfo.length;
        for (let i = 0, len = modelsInfo.length; i &lt; len; i++) {
            const modelInfo = modelsInfo[i];
            this._modelsInfo[modelInfo.id] = modelInfo;
            html += &quot;&lt;div class=&apos;xeokit-form-check&apos;&gt;&quot;;
            html += &quot;&lt;input id=&apos;&quot; + modelInfo.id + &quot;&apos; type=&apos;checkbox&apos; value=&apos;&apos;&gt;&lt;span id=&apos;span-&quot; + modelInfo.id + &quot;&apos; class=&apos;disabled&apos;&gt;&quot; + modelInfo.name + &quot;&lt;/span&gt;&quot;;
            html += &quot;&lt;/div&gt;&quot;;
        }
        this._modelsElement.innerHTML = html;
        for (let i = 0, len = modelsInfo.length; i &lt; len; i++) {
            const modelInfo = modelsInfo[i];
            const modelId = modelInfo.id;
            const checkBox = document.getElementById(&quot;&quot; + modelId);
            const span = document.getElementById(&quot;span-&quot; + modelId);
            checkBox.addEventListener(&quot;click&quot;, () =&gt; {
                if (checkBox.checked) {
                    this.loadModel(modelId);
                } else {
                    this.unloadModel(modelInfo.id);
                }
            });
            span.addEventListener(&quot;click&quot;, () =&gt; {
                const model = this.viewer.scene.models[modelId];
                const modelLoaded = (!!model);
                if (!modelLoaded) {
                    this.loadModel(modelId);
                } else {
                    this.unloadModel(modelInfo.id);
                }
            });
            span.oncontextmenu = (e) =&gt; {
                this._modelsContextMenu.context = {
                    bimViewer: this.bimViewer,
                    viewer: this.viewer,
                    modelId: modelId
                };
                this._modelsContextMenu.show(e.pageX, e.pageY);
                e.preventDefault();
            };
        }
    }

    _parseViewerConfigs(projectInfo) {
        const viewerConfigs = projectInfo.viewerConfigs;
        if (viewerConfigs) {
            this.bimViewer.setConfigs(viewerConfigs);
        }
    }

    _parseViewerContent(projectInfo, done) {
        const viewerContent = projectInfo.viewerContent;
        if (!viewerContent) {
            done();
            return;
        }
        this._parseModelsLoaded(viewerContent, () =&gt; {
            done();
        });
    }

    _parseModelsLoaded(viewerContent, done) {
        const modelsLoaded = viewerContent.modelsLoaded;
        if (!modelsLoaded || (modelsLoaded.length === 0)) {
            done();
            return;
        }
        this._loadNextModel(modelsLoaded.slice(0), done);
    }

    _loadNextModel(modelsLoaded, done) {
        if (modelsLoaded.length === 0) {
            done();
            return;
        }
        const modelId = modelsLoaded.pop();
        this.loadModel(modelId,
            () =&gt; { // Done
                this._loadNextModel(modelsLoaded, done);
            },
            () =&gt; { // Error - recover and attempt to load next model
                this._loadNextModel(modelsLoaded, done);
            });
    }

    _parseViewerState(projectInfo, done) {
        const viewerState = projectInfo.viewerState;
        if (!viewerState) {
            done();
            return;
        }
        this.bimViewer.setViewerState(viewerState, done);
    }

    unloadProject() {
        if (!this._projectId) {
            return;
        }
        const models = this.viewer.scene.models;
        for (var modelId in models) {
            if (models.hasOwnProperty(modelId)) {
                const model = models[modelId];
                model.destroy();
            }
        }
        this._modelsElement.innerHTML = &quot;&quot;;
        this._numModelsLoaded = 0;

        this._loadModelsButtonElement.classList.add(&quot;disabled&quot;);
        this._unloadModelsButtonElement.classList.add(&quot;disabled&quot;);
        if (this._enableAddModels) {
            this._addModelButtonElement.classList.add(&quot;disabled&quot;);
        }
        const lastProjectId = this._projectId;
        this._projectId = null;
        this.fire(&quot;projectUnloaded&quot;, {
            projectId: lastProjectId
        });
    }

    getLoadedProjectId() {
        return this._projectId;
    }

    getModelIds() {
        return Object.keys(this._modelsInfo);
    }

    loadModel(modelId, done, error) {
        if (!this._projectId) {
            const errMsg = &quot;No project currently loaded&quot;;
            this.error(errMsg);
            if (error) {
                error(errMsg);
            }
            return;
        }
        const modelInfo = this._modelsInfo[modelId];
        if (!modelInfo) {
            const errMsg = &quot;Model not in currently loaded project&quot;;
            this.error(errMsg);
            if (error) {
                error(errMsg);
            }
            return;
        }

        this.bimViewer._busyModal.show(`${this.viewer.localeService.translate(&quot;busyModal.loading&quot;) || &quot;Loading&quot;} ${modelInfo.name}`);

        const externalMetadata = this.bimViewer.getConfig(&quot;externalMetadata&quot;);

        if (externalMetadata &amp;&amp; !modelInfo.manifest) {
            this.server.getMetadata(this._projectId, modelId, (json) =&gt; {
                    this._loadGeometry(modelId, modelInfo, json, done, error);
                },
                (errMsg) =&gt; {
                    this.bimViewer._busyModal.hide();
                    this.error(errMsg);
                    if (error) {
                        error(errMsg);
                    }
                });
        } else {
            this._loadGeometry(modelId, modelInfo, null, done, error);
        }
    }

    _loadGeometry(modelId, modelInfo, json, done, error) {

        const modelLoaded = () =&gt; {
            const checkbox = document.getElementById(&quot;&quot; + modelId);
            checkbox.checked = true;
            this._numModelsLoaded++;
            this._unloadModelsButtonElement.classList.remove(&quot;disabled&quot;);
            if (this._numModelsLoaded &lt; this._numModels) {
                this._loadModelsButtonElement.classList.remove(&quot;disabled&quot;);
            } else {
                this._loadModelsButtonElement.classList.add(&quot;disabled&quot;);
            }
            if (this._numModelsLoaded === 1) { // Jump camera to view-fit first model loaded
                this._jumpToInitialCamera();
                this.fire(&quot;modelLoaded&quot;, modelId);
                this.bimViewer._busyModal.hide();
                if (done) {
                    done();
                }
            } else {
                this.fire(&quot;modelLoaded&quot;, modelId);
                this.bimViewer._busyModal.hide();
                if (done) {
                    done();
                }
            }
        };

        const loadError = (errMsg) =&gt; {
            this.bimViewer._busyModal.hide();
            this.error(errMsg);
            if (error) {
                error(errMsg);
            }
        };

        if (modelInfo.manifest) {

            // Load multi-part split model;
            // Uses the BIMViewerDataSource, which then uses the BIMViewer&apos;s Server strategy

            this._dataSource.setProjectId(this._projectId);
            this._dataSource.setModelId(modelId);

            const model = this._xktLoader.load({
                id: modelId,
                manifestSrc: modelInfo.manifest,
                excludeUnclassifiedObjects: true,
                origin: modelInfo.origin || modelInfo.position,
                scale: modelInfo.scale,
                rotation: modelInfo.rotation,
                matrix: modelInfo.matrix,
                edges: (modelInfo.edges !== false),
                saoEnabled: modelInfo.saoEnabled,
                pbrEnabled: modelInfo.pbrEnabled,
                backfaces: modelInfo.backfaces,
                globalizeObjectIds: modelInfo.globalizeObjectIds,
                reuseGeometries: (modelInfo.reuseGeometries !== false)
            });

            model.on(&quot;loaded&quot;, modelLoaded);
            model.on(&quot;error&quot;, loadError);

        } else {

            // Load single XKT/Metamodel file model;
            // Uses the BIMViewer&apos;s Server strategy directly

            this.server.getGeometry(this._projectId, modelId, (arraybuffer) =&gt; {
                    const model = this._xktLoader.load({
                        id: modelId,
                        metaModelData: json,
                        xkt: arraybuffer,
                        excludeUnclassifiedObjects: true,
                        origin: modelInfo.origin || modelInfo.position,
                        scale: modelInfo.scale,
                        rotation: modelInfo.rotation,
                        matrix: modelInfo.matrix,
                        edges: (modelInfo.edges !== false),
                        saoEnabled: modelInfo.saoEnabled,
                        pbrEnabled: modelInfo.pbrEnabled,
                        backfaces: modelInfo.backfaces,
                        globalizeObjectIds: modelInfo.globalizeObjectIds,
                        reuseGeometries: (modelInfo.reuseGeometries !== false)
                    });
                    model.on(&quot;loaded&quot;, modelLoaded);
                    model.on(&quot;error&quot;, loadError);
                }, loadError);
        }
    }

    _jumpToInitialCamera() {
        const viewer = this.viewer;
        const scene = viewer.scene;
        const aabb = scene.getAABB(scene.visibleObjectIds);
        const diag = math.getAABB3Diag(aabb);
        const center = math.getAABB3Center(aabb, tempVec3a);
        const camera = scene.camera;
        const fitFOV = camera.perspective.fov;
        const dist = Math.abs(diag / Math.tan(45 * math.DEGTORAD));
        const dir = math.normalizeVec3((camera.yUp) ? [-0.5, -0.7071, -0.5] : [-1, 1, -1]);
        const up = math.normalizeVec3((camera.yUp) ? [-0.5, 0.7071, -0.5] : [-1, 1, 1]);
        viewer.cameraControl.pivotPos = center;
        viewer.cameraControl.planView = false;
        viewer.cameraFlight.jumpTo({
            look: center,
            eye: [center[0] - (dist * dir[0]), center[1] - (dist * dir[1]), center[2] - (dist * dir[2])],
            up: up,
            orthoScale: diag * 1.1
        });
    }

    unloadModel(modelId) {
        const model = this.viewer.scene.models[modelId];
        if (!model) {
            this.error(&quot;Model not loaded: &quot; + modelId);
            return;
        }
        model.destroy();
        const checkbox = document.getElementById(&quot;&quot; + modelId);
        checkbox.checked = false;
        const span = document.getElementById(&quot;span-&quot; + modelId);
        this._numModelsLoaded--;
        if (this._numModelsLoaded &gt; 0) {
            this._unloadModelsButtonElement.classList.remove(&quot;disabled&quot;);
        } else {
            this._unloadModelsButtonElement.classList.add(&quot;disabled&quot;);
        }
        if (this._numModelsLoaded &lt; this._numModels) {
            this._loadModelsButtonElement.classList.remove(&quot;disabled&quot;);
        } else {
            this._loadModelsButtonElement.classList.add(&quot;disabled&quot;);
        }
        this.fire(&quot;modelUnloaded&quot;, modelId);
    }

    unloadAllModels() {
        const models = this.viewer.scene.models;
        const modelIds = Object.keys(models);
        for (var i = 0, len = modelIds.length; i &lt; len; i++) {
            const modelId = modelIds[i];
            this.unloadModel(modelId);
        }
    }

    getNumModelsLoaded() {
        return this._numModelsLoaded;
    }

    _getLoadedModelIds() {
        return Object.keys(this.viewer.scene.models);
    }

    isModelLoaded(modelId) {
        return (!!this.viewer.scene.models[modelId]);
    }

    getModelsInfo() {
        return this._modelsInfo;
    }

    getModelInfo(modelId) {
        return this._modelsInfo[modelId];
    }

    setEnabled(enabled) {
        if (!enabled) {
            this._modelsTabButtonElement.classList.add(&quot;disabled&quot;);
            this._unloadModelsButtonElement.classList.add(&quot;disabled&quot;);
        } else {
            this._modelsTabButtonElement.classList.remove(&quot;disabled&quot;);
            this._unloadModelsButtonElement.classList.remove(&quot;disabled&quot;);
        }
    }

    /** @private */
    destroy() {
        super.destroy();
        this._xktLoader.destroy();
    }
}

export {ModelsExplorer};</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
